
<!DOCTYPE HTML>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Demo: NodeList Extensions: dojo/query Recap</title>
		<link rel="stylesheet" href="style.css" media="screen">
		<link rel="stylesheet" href="css/demo.css" media="screen">
		<link rel="stylesheet" href="js/dijit/themes/claro/claro.css" media="screen">
	</head>
	<body class="claro">
		<h1>Demo: NodeList Extensions: dojo/query Recap</h1>
		<button type="button" id="btn">Pick out fresh fruits</button>

		<h3>Fresh Fruits</h3>
		<ul id="freshList"></ul>
		
		<h3>Fruits</h3>
		<ul>
			<li class="fresh">Apples</li>
			<li class="fresh">Persimmons</li>
			<li class="fresh">Grapes</li>
			<li class="fresh">Fresh Figs</li>
			<li class="dried">Dates</li>
			<li class="dried">Raisins</li>
			<li class="dried">Prunes</li>
			<li class="fresh dried">Apricots</li>
			<li class="fresh">Peaches</li>
			<li class="fresh">Bananas</li>
			<li class="fresh">Cherries</li>
		</ul>
		<!-- load dojo and provide config via data attribute -->
		<script src="js/dojo/dojo.js" data-dojo-config="async: true"></script>
		<script>
			require(["dojo/query", "dojo/domReady!"], function(query){
				
				query("#btn").on("click", function(){
					
					query("li.fresh")
						.on("click", function(evt){
							alert("I love fresh " + evt.target.innerHTML);
						});
				});
				
			});
		</script>
	</body>
</html>
